<template>
	<view class="content pl30 pr30 bgc-fff">
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item
				required 
				label="产品名称" 
				prop="name"
			>
				<u-input 
					v-model="form.name" 
					placeholder="请输入产品名称" 
				/>
			</u-form-item>
			
 			<u-form-item
				required 
				label="产品单价" 
				prop="price"
			>
				<u-input 
					v-model="form.price" 
					type="digit"
					placeholder="请输入产品单价" 
				/>
			</u-form-item>
			
			<u-form-item
				required 
				label="产品规格" 
				prop="unit"
			>
				<u-input 
					v-model="form.unit" 
					placeholder="请输入产品规格" 
				/>
			</u-form-item>
			
			<u-form-item
				required 
				label="可核销次数" 
				prop="writeOff"
			>
				<u-input 
					v-model="form.writeOff"
					type="digit"
					placeholder="请输入可核销次数" 
				/>
			</u-form-item>
			
			<u-form-item
				label="可核销人用户商家ID" 
				prop="writeOffUserId"
			>
				<u-input 
					v-model="form.writeOffUserId"
					placeholder="请输入可核销人用户商家ID 用英文 , 隔开" 
				/>
			</u-form-item>
			
			<u-form-item 
				required 
				label="产品状态" 
				prop="status"
			>
				<u-radio-group v-model="form.status" active-color="#23bbb3">
					<u-radio v-for="item in statusList" :key="item.value" :name="item.value" label-size="27" icon-size="22">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item
				required
				label="封面" 
				prop="cover"
			>
				<view style="min-height: 220rpx;">
					<imgUpload
						ref="cover_upload"
						max-count="1"
						@changeSuccess="upLoadCoverImg" 
						@removeImg="removeCoverImg" 
					/>
				</view>
			</u-form-item>
			
			<u-form-item 
				required
				label="详情" 
				prop="detail"
			>
				<view style="min-height: 220rpx;">
					<imgUpload
						ref="detail_upload"
						@changeSuccess="upLoaddImg" 
						@removeImg="removeImg" 
					/>
				</view>
			</u-form-item>
		</u-form>
		
		<footerBottom>
			<view class="pl30 pr30 z-flex z-flex-align-c" style="height: 100%;">
				<view style="width: 100%;">
					<u-button 
						:loading="btnLoading"
						:disabled="btnLoading"
						type="success" 
						:custom-style="customStyle" 
						shape="circle"
						@click="add"
					>
						完成
					</u-button>
				</view>
			</view>
		</footerBottom>
		
		<u-picker 
			mode="time" 
			v-model="hourShow" 
			:params="{year: false,month: false,day: false,hour: true,minute: true,second: false}"
			@confirm="handSelectHour"
		>
		</u-picker>
	</view>
</template>

<script>
	import {
		addProApi,getProDetailApi
	} from '@/api/shop.js'
	export default {
		data() {
			return {
				hourShow: false,
				btnLoading: false,
				customStyle: {
					background: '#23bbb3'
				},
				statusList: [{
						name: '待上架',
						value: 1
					},
					{
						name: '已上架',
						value: 2
					}
				],
				form: {
					businessId: '',
					name: '',
					price: '',
					unit: '',
					cover: '',
					detail: '',
					writeOff: '',
					writeOffUserId: '',
					status: 1,
				},
				imgDetail: [],
				rules: {
					price: [{
						validator: (rule, value, callback) => {
							return this.form.price != ''
						},
						message: '请输产品单价',
						trigger: ['change', 'blur'],
					}],
					unit: [{
						required: true,
						message: '请输入产品规格',
						trigger: ['change', 'blur'],
					}],
					writeOff: [{
						validator: (rule, value, callback) => {
							return this.form.writeOff != ''
						},
						message: '请输入可核销次数',
						trigger: ['change', 'blur'],
					}],
					name: [{
						required: true,
						message: '请输入产品名称',
						trigger: ['change', 'blur'],
					}],
					cover: [{
						validator: (rule, value, callback) => {
							return this.form.cover != ''
						},
						message: '请上传封面',
						trigger: ['change', 'blur'],
					}],
					detail: [{
						validator: (rule, value, callback) => {
							return this.imgDetail.length > 0
						},
						message: '请上传详情',
						trigger: ['change', 'blur'],
					}]
				},
				option: {}
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			if(option){
				this.option = option
				if(option.pageType === 'edit'){
					uni.setNavigationBarTitle({
						title: '编辑产品'
					})
					this.getProDetail()
				}
			}
		},
		onShow(){
			
		},
		methods: {
			handSelectHour(e){
				const {hour,minute} = e
				this.form.workTime = `${hour}:${minute}`
			},
			showMap() {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: (res) => {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success: (loca) => {
								this.form.address = loca.address
								this.form.latitude = loca.latitude
								this.form.longitude = loca.longitude
							}
						});
					},
					fail: (err) => {

					}
				});
			},
			upLoadCoverImg(val) {
				let data = val.filter(i => {
					return i.response && i.response.code == 0
				})
				this.$nextTick(() => {
					let img = data.map(i => i.response.data.url)
					this.form.cover = img[0]
				})
			},
			removeCoverImg(index) {
				this.form.cover = ''
			},
			upLoaddImg(val) {
				let data = val.filter(i => {
					return i.response && i.response.code == 0
				})
				this.$nextTick(() => {
					let img = data.map(i => i.response.data.url)
					if(this.imgDetail.length > 0){
						this.imgDetail.push(...img)
					}else{
						this.imgDetail = img
					}
				})
			},
			removeImg(index) {
				this.imgDetail.splice(index,1)
			},
			async getProDetail(){
				const {code, data} = await getProDetailApi({id: this.option.id})
				if(code != 0) return
				this.form = data
				// imgDetail赋值
				this.imgDetail = data.detail.split(',')
				this.$nextTick(()=>{
					const coverUrl = [{url: data.cover}]
					this.$refs.cover_upload.fileList = coverUrl
					const detailUrl = this.imgDetail.map(it=>{return{url: it}})
					this.$refs.detail_upload.fileList = detailUrl
				})
			},
			add() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						this.btnLoading = true
						try {
							let dataInfo = JSON.parse(JSON.stringify(this.form))
							dataInfo.price = Number(dataInfo.price)
							dataInfo.writeOff = Number(dataInfo.writeOff)
							dataInfo.status = Number(dataInfo.status)
							// 产品详情图片可多传，字符串分割
							dataInfo.detail = this.imgDetail.join(',')
							if(this.option.pageType == 'add'){
								dataInfo.businessId = Number(this.option.id)
								let {code, data} = await addProApi(dataInfo)
								this.btnLoading = false
								if (code != 0) return
								uni.showModal({
									title: '新增成功',
									content: '请等待列表的刷新',
									confirmText: '我知道咯',
									showCancel: false,
									success: (res) => {
										uni.$u.route({
											type: 'navigateBack'
										})
									}
								});
							}else{
								dataInfo.id = Number(this.option.id)
								let {code,data} = await addProApi(dataInfo)
								this.btnLoading = false
								if (code != 0) return
								uni.showModal({
									title: '编辑成功',
									content: '请等待列表的刷新',
									confirmText: '我知道咯',
									showCancel: false,
									success: (res) => {
										uni.$u.route({
											type: 'navigateBack'
										})
									}
								});
							}
						} catch (e) {
							this.btnLoading = false
							throw new Error(e)
						}
					} else {
						this.btnLoading = false
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		overflow-y: auto;
	}
</style>
